import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { Form, Row, Col, Select, Input } from 'antd';
const Option = Select.Option;
const FormItem = Form.Item;

const styles = {
	wrapper: {
    paddingTop: 40,
    height: 100,
    borderBottom: '1px solid #ccc'
	}
}

class DataSourceSelector extends Component {
	constructor(props) {
		super(props);
		this.state = {

		}
	}
	componentDidMount() {

	}
	handleChangeInput = (type, e) => {
		const newState = {[type]: e.target.value};
		this.props.updateState(newState);
	}
	handleChangeSelect = (type, value) => {
		const newState = {[type]: value};
		this.props.updateState(newState);
	}
	render() {
		const { form: {getFieldProps, getFieldDecorator}, dataSourcelist, handleType } = this.props;
		const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };
		return (
			<div style={styles.wrapper}>
				<Form>
          <Row>
            <Col span={12}>
              <FormItem {...formItemLayout} label="节点名称">
              	<Input placeholder="节点名称"
            					 style={{ width: '100%' }}
              				 value={this.props.label}
              				 disabled={handleType !== 'create'}
              				 onChange={this.handleChangeInput.bind(null, 'label')}/>
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem {...formItemLayout} label="引用数据源">
	              <Select placeholder="引用数据源"
	              				style={{ width: '100%' }}
              					placeholder="引用数据源"
              					disabled={handleType !== 'create'}
              					value={this.props.uri}
              					onChange={this.handleChangeSelect.bind(null, 'uri')}>
              		{dataSourcelist.map(item => <Option key={item.storePath}>{item.name}</Option>)}
              	</Select>
              </FormItem>
            </Col>
          </Row>
	      </Form>
			</div>
		)
	}
}

DataSourceSelector = Form.create()(DataSourceSelector);

export default DataSourceSelector = connect(function(state) {
	let { graphData: {relationships, nodes} } = state;
	return { relationships, nodes };
})(DataSourceSelector);
